<template>
  <div class="signIn-container">
    <!-- 回退到选择身份 -->
    <button type="button" class="btn btn-warning back-select" @click="back">回退</button>
    <form>
      <div class="SignIn-box">
        <div class="form-group row">
          <label for="validationServer01" class="col-sm-2 col-form-label">名称</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="validationServer01" placeholder="请输入你的登录名称" v-model.trim="username" required>
          </div>
        </div>
        <div class="form-group row">
          <label for="validationServer02" class="col-sm-2 col-form-label">密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control " id="validationServer02" placeholder="请输入你的登录密码" v-model.trim="password" required>
          </div>          
        </div>
        <div class="form-group row">
          <label for="telephone" class="col-sm-2 col-form-label">电话号码</label>
          <div class="col-sm-10">
            <input type="text" class="form-control " id="telephone" placeholder="请输入你的电话号码" v-model.trim="telephone" required>
          </div>          
        </div>
        <!-- 省市县选择器 -->
        <div class="form-group">
          <label for="">请选择你的省市县</label>
          <v-distpicker @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
        </div>
        <button class="btn btn-primary float-right" type="submit" @click.prevent="SignIn">注册</button>
      </div>
    </form>
  </div>
</template>

<script>
import Identity from '@/assets/JsSolutionLib/ClientsideIdentity.js'
export default {
  data() {
    return {
      username: '',
      telephone: '',
      password: '',
      province: '',
      city: '',
      area: ''
    }
  },
  methods: {
    SignIn() {
      this.axios
        .post(this.$route.path, {
          UserName: this.username,
          Telephone: this.telephone,
          Password: this.password,
          Province: this.province,
          City: this.city,
          Area: this.area
        })
        .then(res => {
          if (res.data.isLogin) {
            // 登录成功
            // 1. 存储 token
            Identity(res.data)
            // 2. 跳转到后台主页
            this.$router.push('/home')
          } else {
            // 登录失败
            alert(res.data.errorMessage)
          }
        })
    },
    back() {
      this.$router.push('/SelectIdentity')
    },
    onChangeProvince(province) {
      this.province = province.value
    },
    onChangeCity(city) {
      this.city = city.value
    },
    onChangeArea(area) {
      this.area = area.value
    }
  }
}
</script>

<style lang="less" scoped>
.signIn-container {
  background-color: #35495e;
  height: 100%;
  .SignIn-box {
    padding: 20px;
    width: 520px;
    height: 350px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
  }
}
</style>